<template>
    <div id="app">
        <div id="header">
            <p>jQuery登录注册验证</p>
        </div>
        <div id="center">
            <div class="cent">
                <h1>jQuery用户注册表单验证代码</h1>
                <div class="inp">
                    <div class="inpleft"> 
                      <form  @submit.prevent="onSubmit">  
                        <div class="inpleftx">
                            <label>
                            手机号码
                            </label>
                             <span>
                             <input type="text" v-model="sjhm">
                             </span>
                        </div>
                                    
                        <div class="inpleftx">  <label>
                            邮箱
                            </label>
                             <span>
                             <input type="password" v-model="emil">
                             </span>
                        </div>

                        <div class="inpleftx">
                            <label>
                            登录账号
                            </label>
                             <span>
                             <input type="radio" class="rad">
                             手机号码
                             <input type="radio" class="rad">
                             邮箱
                             </span>
                        </div>

                          <div class="inpleftx">  
                            <label>
                            设置密码
                            </label>
                             <span>
                             <input type="text" v-model="mm">
                             </span>
                        </div>

                        <div class="inpleftx">  
                            <label>
                            获取验证
                            </label>
                             <span>
                             <input type="text" v-model="yz">
                             </span>
                        </div>
                        <label class="zc">
                    <button class="cli">注册</button>
                        </label>

                    </form>
                    </div>
                </div>

                <div class="text">
                    <p>
仅用于发送服务开通与到期提醒以及紧急故障方便联系到您，绝对保密</p>
                    <p>请输入您常用的邮箱</p>
                    <p>请选择以哪个作为您的登录账号</p>
                    <p>请使用6~20个英文字母（区分大小写）、符号或数字请使用6~20个英文字母（区分大小写）、符号或数字</p>
                    <p>若尝试多次仍无法接收到短信验证码，请您联系在线客服帮您开通账号</p>
                </div>
                <div class="clear"></div>
                <hr>
                
                 <div class="clear"></div>
            </div>
           
        </div>
    </div>
</template>
<style>
*{
    margin: 0;
    padding: 0;
}
#header{
    background: black;
    color:white;
}
#header > p {
    padding: 15px;
    padding-left: 30px;
    font-size: 15px;
}
.clear{clear: both;}

#app{
    background:rgb(231,231,231);
    padding-bottom:50px;
}
#center{
    margin: 0 auto;
}
.cent{
    width: 80%;
    margin-left: 12%;
    margin-top: 30px;
    text-align: center;
    background: white;
}
.cent > h1 {
    padding-top:30px;
    background: white;
}

.input{
    width: 80%;
}
.inpleft{
    float: left;
    width: 40%;
    margin-top: 40px;
    margin-left: 15%;
}
.inpleft span > input{
    width: 350px;
    height: 30px;
}
.inpleftx {
    float: right;
    height: 55px;
}
.inpleftx .rad{
    width:50px;
    height: 15px;
}


.text{
    width:40%;
    float: right;
    margin-top: 30px;
    padding-right: 20px;
    padding-bottom: 30px;
}
.text>p{
    height: 57px;
    font-family:"微软雅黑";
    font-size: 7px;
}
.zc{
    margin-top:30px;
    width: 100%;
    height: 50px;
    display: flex;
}
.zc .cli {
    width: 10%; 
    float:left;
}

</style>
<script>
export default{
    data(){
        return{
            sjhm:"",
            emil:"",
            mm:"",
            yz:""
        }
    },
    methods:{
        onSubmit(){
            console.log(this.$data)
        }
    }
}
</script>